<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:head>
		<title> Distribuidora Frutos del Campo </title>
		<link rel="stylesheet" type="text/css" media="screen" href="../css/hojaDeEstilos.css" />
		<meta charset="utf-8" />
	</h:head>
	<h:body>
		<div id = 'contenido'>
		<header>
			<hgroup>
				<a href="../home.xhtml"> <img src="../imagenes/tituloPagina.jpg" /></a>
				<h2>Gestión de Productos</h2>
			</hgroup>
			<hr />
			<br />

			<hgroup>
				<h:form>
					<!-- Menu -->
					<p:menubar autoDisplay="false">

						<p:menuitem value="Registrar"
							action="#{productoBean.visibilizarRegistrar}"
							update=":formularioBusqueda :formularioRegistro :formularioEdicion" />

						<p:menuitem value="Buscar"
							action="#{productoBean.visibilizarBuscar}"
							update=":formularioBusqueda :formularioRegistro :formularioEdicion" />
					</p:menubar>
				</h:form>
			</hgroup>
			<hr />
		</header>

		<section>
			<div id='textoPrincipal'>

				<!-- Panel de Busqueda -->
				<div class="row-fluid" align="center">
					<h:form id="formularioBusqueda">

						<div class="span12" align="left">
							<p:panel id="buscar" header="Buscar Productos" visible="#{productoBean.panelBuscarVisibilidad}">

								<h:panelGrid id="panelBusqueda" columns="4" cellpadding="5">

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText value="#{productoBean.codigoBuscar}" id="codigo"
										label="Codigo " />

									<h:outputLabel for="nombre" value="Nombre: " />
									<p:inputText value="#{productoBean.nombreBuscar}" id="nombre"
										label="Nombre " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText value="#{productoBean.estadoBuscar}" id="estado"
										label="Estado " />

									<h:outputLabel for="tipo" value="Tipo: " />
									<p:inputText value="#{productoBean.tipoBuscar}" id="tipo"
										label="Tipo " />

									<h:outputLabel for="marca" value="Marca: " />
									<p:inputText value="#{productoBean.marcaBuscar}" id="marca"
										label="Marca " />

								</h:panelGrid>

								<p:commandButton id="buscarButton" value="Buscar"
									action="#{productoBean.buscarProducto}"
									update="panelBusqueda productosTabla" />

							</p:panel>
						</div>

						<div class="span12" align="left">
							<p:panel id="mostrar" header="Productos Encontrados" visible="#{productoBean.panelBuscarVisibilidad}">

								<p:outputPanel id="productosTabla">
									<p:dataTable id="dataTable" var="producto"
										value="#{productoBean.productos}" widgetVar="productosTable"
										rowKey="#{producto.codigo}"
										selection="#{productoBean.productoSeleccionado}"
										selectionMode="single">

										<p:column id="codigoColumn" headerText="Codigo"
											sortBy="codigo">
											<h:outputText value="#{producto.codigo}" />
										</p:column>

										<p:column id="nombreColumn" headerText="Nombre"
											sortBy="nombre">
											<h:outputText value="#{producto.nombre}" />
										</p:column>

										<p:column id="estadoColumn" headerText="Estado"
											sortBy="estado">
											<h:outputText value="#{producto.estado}" />
										</p:column>

										<p:column id="detallesColumn" style="width:10%"
											headerText="Detalles" footerText=" ">
											<p:commandButton id="selectButton"
												style="margin:1px; padding:1px; width: 25px; height: 25px; left:25%"
												update=":formularioBusqueda :display"
												oncomplete="PF('detalles').show()"
												icon="ui-icon-arrow-4-diag">
												<f:setPropertyActionListener value="#{producto}"
													target="#{productoBean.productoSeleccionadoDetalles}" />
											</p:commandButton>
										</p:column>
									</p:dataTable>
								</p:outputPanel>

								<p:commandButton id="editarButton" value="Editar"
									update=":formularioEdicion :formularioRegistro :formularioBusqueda"
									action="#{productoBean.editarProducto}" />

								<p:commandButton id="eliminarButton" value="Eliminar"
									action="#{productoBean.eliminarProducto}"
									update="productosTabla :formularioEdicion">
									<p:confirm header="Confirmacion de eliminacion"
										message="Esta seguro que quiere eliminar este producto?"
										icon="ui-icon-alert" />
								</p:commandButton>

								<p:confirmDialog global="true" showEffect="fade"
									hideEffect="explode">
									<p:commandButton value="Si" type="button"
										styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
									<p:commandButton value="No" type="button"
										styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
								</p:confirmDialog>
							</p:panel>
						</div>
					</h:form>

					<!-- Dialogo para cuando se apreta el Boton de Detalles de producto -->
					<p:dialog header="Detalles del Producto" widgetVar="detalles"
						position="top" resizable="false" id="productoDetalles"
						showEffect="fade" hideEffect="explode" modal="true">

						<h:panelGrid id="display" columns="2" cellpadding="4"
							style="margin:0 auto;">

							<f:facet name="header">
								<p>Datos:</p>
							</f:facet>

							<h:outputText value="Codigo: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.codigo}"
								style="font-weight:bold" />

							<h:outputText value="Nombre: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.nombre}"
								style="font-weight:bold" />

							<h:outputText value="Estado: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.estado}"
								style="font-weight:bold" />

							<h:outputText value="Tipo: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.tipoProducto.nombre}"
								style="font-weight:bold" />

							<h:outputText value="Marca: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.marca.nombre}"
								style="font-weight:bold" />

							<h:outputText value="Unidad de Medida: " />
							<h:outputText
								value="#{productoBean.productoSeleccionadoDetalles.unidadMedida.nombre}"
								style="font-weight:bold" />

						</h:panelGrid>

					</p:dialog>
				</div>


				<!-- Panel de Edicion -->
				<div class="row-fluid" align="center">
					<h:form id="formularioEdicion">

						<div class="span12" align="left">
							<p:panel id="editar" header="Edicion del Producto"
								visible="#{productoBean.panelEditarVisibilidad}">

								<h:panelGrid columns="4" cellpadding="5">

									<h:outputLabel for="nombre" value="Nombre: " />
									<p:inputText
										value="#{productoBean.productoSeleccionado.nombre}"
										id="nombre" required="true" label="Nombre " />

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText
										value="#{productoBean.productoSeleccionado.codigo}"
										id="codigo" required="true" label="Codigo " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText
										value="#{productoBean.productoSeleccionado.estado}"
										id="estado" required="true" label="Estado " />

									<h:outputLabel for="comboMarca" value="Marca: " />
									<p:selectOneMenu id="comboMarca"
										value="#{productoBean.productoSeleccionado.marca}"
										converter="marcaConverter" effect="fade" label="Marca ">
										<f:selectItem itemLabel="#{productoBean.nombreMarca}"
											itemValue="" />
										<f:selectItems value="#{productoBean.marcas}" var="marca"
											itemValue="#{marca}" itemLabel="#{marca.nombre}" />
									</p:selectOneMenu>

									<h:outputLabel for="comboTipo" value="Tipo: " />
									<p:selectOneMenu id="comboTipo"
										value="#{productoBean.productoSeleccionado.tipoProducto}"
										converter="tipoProductoConverter" effect="fade" label="Marca ">
										<f:selectItem itemLabel="#{productoBean.nombreTipo}"
											itemValue="" />
										<f:selectItems value="#{productoBean.tiposProductos}"
											var="tipoProducto" itemValue="#{tipoProducto}"
											itemLabel="#{tipoProducto.nombre}" />
									</p:selectOneMenu>

									<h:outputLabel for="comboUnidad" value="Unidad de Medida: " />
									<p:selectOneMenu id="comboUnidad"
										value="#{productoBean.productoSeleccionado.unidadMedida}"
										converter="unidadMedidaConverter" effect="fade"
										label="Unidad de Medida ">
										<f:selectItem itemLabel="#{productoBean.nombreUnidadMedida}"
											itemValue="" />
										<f:selectItems value="#{productoBean.unidadesMedidas}"
											var="unidadMedida" itemValue="#{unidadMedida}"
											itemLabel="#{unidadMedida.nombre}" />
									</p:selectOneMenu>

								</h:panelGrid>

								<h:panelGrid columns="2" cellpadding="5">
									<h:outputLabel for="proveedoresEditar"
										value="Lista de Proveedores: " />
								</h:panelGrid>
								<h:panelGrid columns="2" cellpadding="5">
									<p:pickList id="proveedoresEditar"
										value="#{productoBean.proveedores}" var="proveedor"
										itemValue="#{proveedor}" itemLabel="#{proveedor.codigo}"
										converter="proveedorConverter">

										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Insertados</f:facet>

										<p:ajax event="transfer" listener="#{productoBean.transferir}" />

										<p:column style="width:50%;"> 
											#{proveedor.codigo}  
        								</p:column>

										<p:column style="width:50%;"> 
											#{proveedor.empresa}  
        								</p:column>

									</p:pickList>
								</h:panelGrid>

								<p:commandButton id="editarButton" value="Guardar"
									update=":formularioBusqueda :formularioEdicion proveedoresEditar :formularioRegistro"
									action="#{productoBean.actualizarProducto}"
									disabled="#{empty productoBean.productoSeleccionado}" />

								<p:commandButton id="volverButton" value="Volver"
									update=":formularioBusqueda :formularioEdicion :formularioRegistro"
									action="#{productoBean.volverBusqueda}" />
									
							</p:panel>
						</div>
					</h:form>

				</div>

				<!-- Panel de Registro -->
				<div class="row-fluid" align="center">
					<h:form id="formularioRegistro">
						<div class="span12" align="left">

							<p:panel id="registrar" header="Registro de Productos"
								visible="#{productoBean.panelRegistrarVisibilidad}">

								<h:panelGrid id="panel" columns="4" cellpadding="5">

									<h:outputLabel for="nombre" value="Nombre: " />
									<p:inputText value="#{productoBean.nombreRegistrar}"
										id="nombre" required="true" label="Nombre " />

									<h:outputLabel for="codigo" value="Codigo: " />
									<p:inputText value="#{productoBean.codigoRegistrar}"
										id="codigo" required="true" label="Codigo " />

									<h:outputLabel for="estado" value="Estado: " />
									<p:inputText value="#{productoBean.estadoRegistrar}"
										id="estado" required="true" label="Estado " />

									<h:outputLabel for="comboMarca" value="Marca: " />
									<p:selectOneMenu id="comboMarca"
										value="#{productoBean.marcaSeleccionada}" required="true"
										converter="marcaConverter" effect="fade" label="Marca ">
										<f:selectItem itemLabel="Seleccionar una" itemValue="" />
										<f:selectItems value="#{productoBean.marcas}" var="marca"
											itemValue="#{marca}" itemLabel="#{marca.nombre}" />
									</p:selectOneMenu>

									<h:outputLabel for="comboTipo" value="Tipo: " />
									<p:selectOneMenu id="comboTipo"
										value="#{productoBean.tipoProductoSeleccionado}"
										required="true" converter="tipoProductoConverter"
										effect="fade" label="Marca ">
										<f:selectItem itemLabel="Seleccionar uno" itemValue="" />
										<f:selectItems value="#{productoBean.tiposProductos}"
											var="tipoProducto" itemValue="#{tipoProducto}"
											itemLabel="#{tipoProducto.nombre}" />
									</p:selectOneMenu>

									<h:outputLabel for="comboUnidad" value="Unidad de Medida: " />
									<p:selectOneMenu id="comboUnidad"
										value="#{productoBean.unidadMedidaSeleccionada}"
										required="true" converter="unidadMedidaConverter"
										effect="fade" label="Unidad de Medida ">
										<f:selectItem itemLabel="Seleccionar una" itemValue="" />
										<f:selectItems value="#{productoBean.unidadesMedidas}"
											var="unidadMedida" itemValue="#{unidadMedida}"
											itemLabel="#{unidadMedida.nombre}" />
									</p:selectOneMenu>

								</h:panelGrid>


								<h:panelGrid columns="1" cellpadding="5">
									<h:outputLabel for="proveedoresRegistrar"
										value="Lista de Proveedores: " />
								</h:panelGrid>
								<h:panelGrid columns="1" cellpadding="5">
									<p:pickList id="proveedoresRegistrar"
										value="#{productoBean.proveedoresRegistrar}" var="proveedor"
										itemValue="#{proveedor}" itemLabel="#{proveedor.codigo}"
										converter="proveedorConverter">

										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Insertados</f:facet>

										<p:ajax event="transfer" listener="#{productoBean.transferir}" />

										<p:column style="width:50%;"> 
											#{proveedor.codigo}  
        								</p:column>

										<p:column style="width:50%;"> 
											#{proveedor.empresa}  
        								</p:column>

									</p:pickList>
								</h:panelGrid>

								<p:commandButton id="regiButton" value="Registrar"
									action="#{productoBean.registrarProducto}"
									update="panel proveedoresRegistrar" />

							</p:panel>
						</div>
					</h:form>

				</div>
			</div>
		</section>
	</div>
	
	</h:body>
</html>